<template>
  <el-dialog title="电桩解绑" v-model="openBind" width="1000px" append-to-body :close-on-click-modal="false" @close="cancel">
    <el-form ref="formBindRef" :model="formBind" :rules="rulesBind" label-width="120px">
      <el-form-item label="设备解绑" prop="devId">
        <span v-if="formBind.devId.length > 0 && formBind.devId.length != total && total > 0">
          已选择
          <span v-for="(item, key) in formBind.devName" :key="key">
            {{ item }},
          </span>
        </span>
        <span v-else-if="formBind.devId.length == total && total > 0">全部设备</span>
        <span v-else>未选择</span>
        <el-button type="primary" @click="checkAll" v-if="formBind.devId.length != total">全选</el-button>
        <el-button type="danger" @click="uncheckAll" v-if="formBind.devId.length > 0">取消选择
        </el-button>
      </el-form-item>
      <el-table v-loading="loading" :data="dev_list" v-if="(formBind.devId.length != total && total > 0) || total == 0"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="设备名称" align="center" prop="devName" />
        <el-table-column label="设备号" align="center" prop="sn" />
        <el-table-column label="设备状态" align="center" prop="devStatus">
          <template #default="scope">
            <dict-tag :options="dev_status" :value="scope.row.devStatus" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #defalut="scope">
            <el-button :type="scope.row.checked == true ? 'danger' : 'primary'" @click="handleCheck(scope.row)">
              <span>
                {{ scope.row.checked ? "取消选择" : "选择" }}
              </span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0 && formBind.devId.length != total" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getDevList" />
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { unbindDev } from "@/api/equipment/station";
import { listDev } from "@/api/equipment/dev";

const { proxy } = getCurrentInstance();
const { dev_status } = proxy.useDict("dev_status");

const loading = ref(false)
const openBind = ref(false)
const formBind = ref({
  stationId: null,
  devId: [],
  devName: [],
})
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  devName: null,
  stationId: null,
})
const total = ref(0)
const rulesBind = ref({})
const dev_list = ref([])


function open(row) {
  queryParams.value.stationId = row.stationId
  formBind.value.stationId = row.stationId
  openBind.value = true;
  getDevList();
}


// 暴露出去
defineExpose({
  open,
})


function cancel() {
  openBind.value = false;
  reset();
}

function reset() {
  formBind.value = {
    stationId: null,
    devId: [],
    devName: [],
  };
  proxy.resetForm("formBindRef");
}


function getDevList() {
  loading.value = true;
  listDev(queryParams.value).then((response) => {
    dev_list.value = response.rows;
    total.value = response.total;
    if (dev_list.value.length > 0) {
      for (let i = 0; i < dev_list.value.length; i++) {
        dev_list.value[i].checked = false;
        for (let j = 0; j < formBind.value.devId.length; j++) {
          if (formBind.value.devId[j] == dev_list.value[i].devId) {
            formBind.value.devName[j] = dev_list.value[i].devName;
            dev_list.value[i].checked = true;
          }
        }
      }
    }
    loading.value = false;
  });
}


function uncheckAll() {
  formBind.value.devId = []
  formBind.value.devName = []
  queryParams.value.pageSize = 10
  getDevList()
}


function checkAll() {
  formBind.value.devId = []
  formBind.value.devName = []
  queryParams.value.pageSize = total.value
  listDev(queryParams.value).then((response) => {
    dev_list.value = response.rows;
    total.value = response.total;
    if (dev_list.value.length > 0) {
      for (let i = 0; i < dev_list.value.length; i++) {
        formBind.value.devId.push(dev_list.value[i].devId);
        formBind.value.devName.push(dev_list.value[i].devName);
      }
    }
  })
}

function handleSelectionChange(selection) {
  formBind.value.devId = selection.map((item) => item.devId);
}


function handleCheck(row) {
  let index = formBind.value.devId.findIndex((item) => item == row.devId)
  if (index == -1) {
    formBind.value.devId.push(row.devId);
    formBind.value.devName.push(row.devName);
    row.checked = true;
  } else {
    formBind.value.devId.splice(index, 1)
    formBind.value.devName.splice(index, 1)
    row.checked = false;
  }
  getDevList()
}


function submitForm() {
  proxy.$refs["formBindRef"].validate((valid) => {
    if (valid) {
      if (formBind.value.devId.length == 0) {
        proxy.$modal.msgWarning("解绑设备不能为空");
        return
      }
      unbindDev(formBind.value.devId).then((response) => {
        if (response.code == 0) {
          proxy.$modal.notifySuccess("解绑成功");
          cancel();
          if (reload.value) reload();
        }
      });
    }
  });
}
</script>
